<template>
    <div class="p-15 p-t-0 box-shadow-1">
        <div class="table-search">
            <div>
                <el-form>
                    <el-row style="padding-top: 15px;">
                      <el-col :span="8" class="text-left">
                        <div class="el-input el-input-group el-input-group--prepend" style="width: 90%">
                          <div class="el-input-group__prepend">单据类型</div>
                          <el-select class="w-100p"
                                     v-model="documentType"
                                     clearable
                                     filterable
                                     placeholder="请选择单据类型"
                                     @change="getBillByDocumentType">
                            <el-option
                              v-for="item in documentTypes"
                              :key="item.key"
                              :label="item.text"
                              :value="item.key">
                            </el-option>
                          </el-select>
                        </div>
                      </el-col>
                        <el-col :span="6"  >
                            <!--<div class="addInput">-->
                            <!--<el-button>供应商</el-button>-->
                            <!--<el-select style="width:65%"  v-model="supplier" placeholder="请选择供应商" @change="getBillBySupplier">-->
                            <!--<el-option-->
                            <!--v-for="item in suppliers"-->
                            <!--:key="item.id"-->
                            <!--:label="item.name"-->
                            <!--:value="item.id">-->
                            <!--</el-option>-->
                            <!--</el-select>-->
                            <!--</div>-->
                            <div class="el-input el-input-group el-input-group--prepend">
                                <div class="el-input-group__prepend">供应商</div>
                                <el-select v-model="supplier"
                                           class="w-100p"
                                           value-key="id"
                                           clearable
                                           @change="getBillBySupplier"
                                           :remote-method="remoteMethodFindSupplier"
                                           remote
                                           @keyup.enter.native="codeEnter($event)"
                                           :filterable="true"
                                           placeholder="请选择供应商" >
                                    <el-option :disabled="true" value="">
                                        <el-row>
                                            <el-col :span="12">编号</el-col>
                                            <el-col :span="12">供应商名称</el-col>
                                        </el-row>
                                    </el-option>
                                    <el-option v-for="item in suppliers" :key="item.id" :label="item.name" :value="item.id">
                                        <el-row>
                                            <el-col :span="12">{{item.no}}</el-col>
                                            <el-col :span="12">{{item.name}}</el-col>
                                        </el-row>
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>

                        <el-col :span="6" >
                            <el-date-picker class="w-90p"
                                            placeholder="请选择时间段"
                                            v-model="createAt"
                                            @change="demo"
                                            type="daterange"
                                            align="right"
                                            unlink-panels
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="4" class="m-l-20">
                            <el-button class="btn-info"  icon="search" @click="search">搜索</el-button>
                            <el-button class="btn-warning m-l-0" icon="setting" @click="cleanSearch">重置</el-button>
                        </el-col>
                    </el-row>

                    <el-row class="m-t-15 text-left">
                        <el-col :span="12" >
                            <!--<router-link :to="'/stores/receivePayments/add?id=1'">-->
                                <el-button class="btn-info" @click="add('1')"><i class="icon icon-daochu"></i> 总部入库付款</el-button>
                            <!--</router-link>-->
                            <!--<router-link :to="'/stores/receivePayments/add?id=2'">-->
                                <el-button class="btn-warning m-l-0" @click="add('2')"><i class="icon icon-daoru-copy"></i> 总部出库收款</el-button>
                            <!--</router-link>-->
                        </el-col>
                    </el-row>
                </el-form>
                <br />
            </div>   <!--头部验证条件-->
            <div class="orderTable" style="padding-bottom: 10px">
                <el-table
                        :data="tableData"
                        border
                        show-summary
                        :summary-method="getSummaries"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                  <el-table-column
                    prop="no"
                    label="单据号">
                  </el-table-column>
                  <el-table-column
                    prop="storeName"
                    label="商品信息库">
                  </el-table-column>

                    <el-table-column
                            prop="goodsStatus"
                            label="单据类型">
                        <template scope="scope">
                            <div>
                              <span v-if="scope.row.type && scope.row.type.key">{{scope.row.type.text}}</span>
                            </div>
                        </template>
                    </el-table-column>
                  <el-table-column
                    prop="goodsStatus"
                    label="是否结清">
                    <template scope="scope">
                      <div>
                        <span v-if="scope.row.paymentState && scope.row.paymentState.key">{{scope.row.paymentState.text}}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="warehouseName"
                    label="仓库">
                  </el-table-column>
                  <el-table-column
                    prop="arrearAmount"
                    label="总金额">
                    <template scope="scope">
                      <div >
                        <span >{{scope.row.amount}}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="arrearAmount"
                    label="应付金额">
                    <template scope="scope">
                      <div >
                        <span >{{(scope.row.amount*1-scope.row.payAmount*1-scope.row.giftAmount*1 ).toFixed(2)}}</span>

                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="inTime"
                    label="日期">
                    <template scope="scope">
                      <div>
                        {{scope.row.inTime}}
                      </div>
                    </template>
                  </el-table-column>
                    <!--<el-table-column-->
                            <!--prop="purchaser.name"-->
                            <!--label="经办人">-->
                    <!--</el-table-column>-->

                </el-table>
            </div><!--Table数据处理-->
        </div>
    </div>
</template>
<script>
    //注意路径
    export default{
        data(){
            return {
                modelForm:{

                },
                supplier:"",//供应商
                documentType:"",
                suppliers:[], //供应商
                suppliers2:[],
                createAt_st:"",//开始日期
                createAt_et:"",//结束日期
                tableData:[],
                documentTypes:[], //单据类型
                amountSum:0,
                createAt:"",
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]},
                cStart:"",
                cEnd:"",
            };
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
          codeEnter(e){
            console.log(e.target.value);
            if(e.target && e.target.value){
              this.search();

            }

          },
            //页面第一次进来获取表单需要的数据
            initData(){
                this.$axios.get("stores/receivePayments/create").then(data=>{
                    if(data.status==200){
                        this.suppliers = data.content.suppliers;
                        this.suppliers2=data.content.suppliers;
                        // this.purchasers = data.content.purchasers;
                        this.documentTypes = data.content.receivePaymentTypes;
                        this.documentType= data.content.receivePaymentTypes[0].key;
                        this.tableData = data.content.orders;
                    }else{
                        this.$message.error(data.message);
                    }
                })
            },
            goBack() {
                this.router.go(-1);
            },

            add(val){
                if(!val){
                    return;
                }
                if(!this.supplier){
                    this.$message({
                        message: '请选择供应商',
                        type: 'warning'
                    });
                    return;
                }
                if(val==1){
                    this.router.push({path:"/paymentBills/add?id=1&s="+this.supplier});
                }else if(val==2){
                    this.router.push({path:"/paymentBills/add?id=2&s="+this.supplier});
//                    alert(2);
                }
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            isNum(item,key){
                var r = /^\+?[1-9][0-9]*$/;
                if( ! r.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
            },
            isNumValue(event){
                //console.log(event);
                var reg = /^(-?[1-9]\d{0,5}\.\d{1,2}|-?0\.\d{1,2}|-?[1-9]\d{0,5}|0)/;
                if(reg.test(event.target.value)){
                    event.target.value = event.target.value.match(reg)[0]
                }else{
                    event.target.value = 0
                }
            },
            isDouble(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if( ! isNum.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
            },
            cleanSearch(){
                this.supplier = "";
                this.documentType = "";
                this.cStart="";
                this.cEnd="";
                this.createAt = '';
                this.initData();

            },
            demo(val){

                console.log(val);
              this.createAt_st=this.moment(val[0]).format("YYYY-MM-DD");
              this.createAt_et=this.moment(val[1]).format("YYYY-MM-DD");

            },
            search(){

                var search = "";
                if(this.supplier){
                  search = "search.supplierId_eq="+this.supplier+"&"+search;
                }else {
                    this.$message({
                        message: '请选择供应商',
                        type: 'warning'
                    });
                    return;
                }
                if(this.documentType && this.documentType!='ALL'){
                    search = "type="+this.documentType+"&"+search;
                }
                console.log(this.documentType)
              if(this.documentType=='STOREIN'){
                if(this.createAt_st!=""){
                  search="search.inTime_gte="+this.createAt_st+" 00:00:00&"+search;
                }
                if(this.createAt_et!=""){
                  search="search.inTime_lte="+this.createAt_et+" 23:59:59&"+search;
                }
              }else{
                if(this.createAt_st!=""){
                  search="search.outTime_gte="+this.createAt_st+" 00:00:00&"+search;
                }
                if(this.createAt_et!=""){
                  search="search.outTime_lte="+this.createAt_et+" 23:59:59&"+search;
                }
              }
                if(!search){
                    return;
                }
                this.$axios.get("stores/receivePayments/create?"+search).then(data=>{
                    if(data.status==200){
                        this.suppliers = data.content.suppliers;
                        this.purchasers = data.content.purchasers;
                        if(data.content.orders && data.content.orders.length>0){
                            for(let i=0;i<data.content.orders.length;i++){
                                data.content.orders[i].realamount=0;
                                data.content.orders[i].youhuiamount=0
                            }
                        }
                        this.tableData = data.content.orders;
                    }else{
                        this.$message.error(data.message);
                    }
                });
            },
            getEntryTime(val){
                this.createAt_st=val;
                console.log(val);
            },
            getEntryTime1(val){
                this.createAt_et=val;
            },
            printNum(event){
                event.currentTarget.select();
            },

            getBillBySupplier(value){
              this.search();
            },
            remoteMethodFindSupplier(query){
                if (query !== '') {
                    this.loading = true;
                    this.$axios.get("suppliers/getSuppliersByNameOrNo?supplierNoOrName="+query).then(data=>{
                        this.loading = false;
                        if(data.success){
                            this.suppliers=data.content;
                        }
                    });

                }else {
                    this.suppliers = this.suppliers2;
                }
            },

            getBillByDocumentType(value){
                  this.search();

            },
            getSummaries(param) {
              const {columns, data} = param;
              const sums = [];
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '合计';
                  return;
                }
                if (index == 6) {
                  console.log("KKKKK5");
                  const values = data.map(item => Number(item[column.property]));
                  if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                      const value = Number(curr);
                      console.log("KKKKK6");
                      if (!isNaN(value)) {
                        if (index == 6) {
                          console.log("KKKKKk");
                          return prev + curr;
                        } else {
                          console.log("KKKKKk3");
                          return ((prev * 1 + curr * 1) * 1).toFixed(2);
                        }
                      } else {
                        if (index == 6) {
                          console.log("KKKKKk1");
                          return prev;
                        } else {
                          console.log("KKKKKk5");
                          return (prev * 1).toFixed(2);
                        }
                      }
                    }, 0);
                  } else {
                    sums[index] = '0';
                  }
                }
              });

              return sums;
            },

        }
    }
</script>
<style scoped>
    @media (min-width:1198px) and (max-width: 1620px){
        .el-col-lg-5 {
            width: 30%;
        }
        .el-col-lg-3{
            width: 20%;
        }
    }
    @media(min-width:763px) and (max-width: 824px){
        .el-col-lg-5 {
            width: 100%;
        }
        .el-col-lg-3{
            width: 100%;
        }

    }
    @media(min-width:989px) and (max-width: 1901px){
        .el-col-md-8 {
            width: 40%;
        }
    }

</style>
